<template>
  <div class="containers">
    <div class="container-search">
      <el-form
        :model="formInline"
        label-position="left"
        class="demo-form-inline"
        style="position: relative"
        size="small"
        @submit.native.prevent
      >
        <el-row class="container-search-row" style="margin-top:20px;">
          <el-col :span="24">
            <el-form-item label="">
              <el-input
                v-model="formInline.orderTitle"
                placeholder="请输入标题"
                clearable
              />
            </el-form-item>
            <el-form-item
              :class="['btn-box', showHighSearch ? 'btn-box-show' : '']"
            >
              <el-button
                size="mini"
                type="primary"
                @click="handleSearchBtn"
              >查询</el-button>
              <el-button
                size="mini"
                :icon="
                  showHighSearch ? 'el-icon-arrow-down' : 'el-icon-arrow-up'
                "
                @click="handleTiggleSearch"
              >
                高级查询
              </el-button>
            </el-form-item>
          </el-col>
        </el-row>
        <div v-if="showHighSearch" class="container-search-row high-search-row">
          <el-form-item class="el-form-item-radius" label="流水号">
            <el-input
              v-model="formInline.condition.serialNumber"
              clearable
              class="search-form-item"
              placeholder="流水号"
            />
          </el-form-item>
          <el-form-item class="el-form-item-radius" label="流程">
            <el-select
              v-model="formInline.condition.flowId"
              filterable
              clearable
              class="search-form-item"
              placeholder="请选择"
            >
              <el-option
                v-for="i in dictOptions.flowIdsLists"
                :key="i.value"
                :label="i.label"
                :value="i.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item class="el-form-item-radius" label="保存时间范围">
            <el-date-picker
              ref="dataPickerRef"
              v-model="formInline.condition.createTimeRange"
              class="data-picker-radius"
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="yyyy-MM-dd HH:mm:ss"
              :default-time="['00:00:00', '00:00:00']"
              @change="handleChangeDatePicker($event)"
            />
          </el-form-item>
          <el-button type="primary" @click="handleSearchBtn">查询 </el-button>
          <el-button @click="handleReset">重置</el-button>
        </div>
      </el-form>
    </div>
    <div style="margin-top: 10px">
      <el-button
        :disabled="checkNodes.length == 0"
        size="mini"
        @click="handleDelList"
      >删除</el-button>
    </div>
    <hk-table
      :table-data="tableData"
      :table-columns="tableLabelLists"
      :is-need-index="true"
      :selection="true"
      :total="total"
      :common-fixed="true"
      :show-tooltip="false"
      :operate="true"
      table-height="80px"
      :show-index="true"
      :query-params="queryParams"
      @handleSelectionChange="handleSelectionChange"
      @changePage="changePage"
    >
      <template #operate="scope">
        <el-button
          type="text"
          @click="handleCopy(scope.row.row)"
        >再次编辑</el-button>
        <el-button
          type="text"
          @click="handleDelList(scope.row.row)"
        >删除</el-button>
      </template>
      <template #orderStatus="{ row }">
        <span>{{ setOrderStatus(row.row.orderStatus) }}</span>
      </template>
      <template #orderTitle="{ row }">
        <el-button type="text" style="width:100%;text-align:left" :title="row.row.orderTitle" @click="handleView(row.row)">{{
          row.row.orderTitle
        }}</el-button>
      </template>
    </hk-table>
  </div>
</template>

<script>
import HkTable from '@/components/HkTable'
import {
  queryList,
  listAllFlowMap,
  deleteDraft,
  revokeWork,
  pageQueryDraft
} from '@/api/workbench/workbenchList.js'
export default {
  components: { HkTable },
  data() {
    return {
      showHighSearch: false,
      formInline: {
        condition: {}
      },
      dictOptions: {
        orderStatusLists: [
          { label: '已删除', value: -1 },
          { label: '处理中', value: 1 },
          { label: '已完成', value: 2 },
          { label: '已撤销', value: 3 },
          { label: '已挂起', value: 4 }
        ],
        flowIdsLists: []
      },
      queryParams: {
        current: 1,
        size: 10
      },
      checkNodes: [],
      tableData: [],
      tableLabelLists: [
        { label: '标题', param: 'orderTitle', type: 'slot' },
        { label: '流水号', param: 'serialNumber' },
        { label: '流程名称', param: 'flowName' },
        { label: '保存时间', param: 'createTime' }
      ],
      title: '新建',
      total: 0,
      allFlowMapLists: [],
      currentRow: null,
      // 当前用户ID
      currentUserId: ''
    }
  },
  mounted() {
    this.getListData()
    this.getListAllFlowMap()
  },
  methods: {
    // 获取流程列表
    getListAllFlowMap() {
      listAllFlowMap().then((res) => {
        this.allFlowMapLists = res
        //  流程下拉框
        this.dictOptions.flowIdsLists = this.allFlowMapLists.map((i, index) => {
          for (const key in i) {
            return { label: key, value: JSON.stringify(index) }
          }
        })
      })
    },
    //  获取列表数据
    getListData() {
      let flowIds = []
      if (this.formInline.condition && this.formInline.condition.flowId) {
        flowIds = Object.values(
          this.allFlowMapLists[this.formInline.condition.flowId]
        )[0]
      }
      pageQueryDraft(
        Object.assign(
          {
            orderTitle: this.formInline.orderTitle,
            flowProcessIds: flowIds
          },
          this.queryParams,
          this.formInline.condition
        )
      ).then((res) => {
        this.tableData = res.list
        this.total = res.total
      })
    },
    // 删除按钮
    handleDelList(row) {
      if (row?.id) {
        this.checkNodes = [row]
      }
      console.log(this.checkNodes)
      const _this = this
      this.$modal
        .confirm('是否确认删除所选数据项？')
        .then(function() {
          const ids = _this.checkNodes.map((i) => i.id)
          return deleteDraft(ids)
        })
        .then(() => {
          this.$modal.msgSuccess('删除成功')
          this.getListData()
        })
        .catch((error) => {
          console.log(error)
        })
    },
    // 列表多选项
    handleSelectionChange(val) {
      this.checkNodes = val
    },
    // 分页
    changePage(val) {
      this.getListData()
    },
    // 高级查询项显示
    handleTiggleSearch() {
      this.showHighSearch = !this.showHighSearch
    },
    //  查询
    handleClickSeach() {
      // this.getListData();
    },
    //  高级查询
    handleSearchBtn() {
      this.queryParams.current = 1
      this.getListData()
    },
    //  高级重置
    handleReset() {
      this.formInline = {
        serialNumber: '',
        condition: {}
      }
      this.getListData()
    },
    //  时间范围区间
    handleChangeDatePicker(e, type) {},
    //  设置工单状态
    setOrderStatus(status) {
      const currentStatusArr = this.dictOptions.orderStatusLists.filter((i) => {
        return status == i.value
      })
      return currentStatusArr[0].label
    },
    //  查看工单
    handleView(row) {
      this.$router.push({
        path: window.prefix + '/workOrder/workbench/listCreate',
        query: {
          id: row.id,
          type: 'view',
          title: row.orderTitle
        }
      })
    },
    //  再次编辑
    handleCopy(row) {
      this.$router.push({
        path: window.prefix + '/workOrder/workbench/listCreate',
        query: { type: 'edit', id: row.id }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .cell .el-button--medium{
  span{
    width:100%;
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}
::v-deep .el-form-item{
  margin-bottom:0 !important;
}
.containers {
  display: flex;
  flex-direction: column;
  height: 100%;
}
</style>
